<template>
  <div id="discover">
    <div v-if="$store.getters.getPlayerState">
      <player></player>
    </div>

    <div v-else>
    <div class="tab-bar"  >
      <div ref="bottom" class="bottom"></div>
      <div @mouseleave="tabSwitch3" @mouseenter="tabSwitch2(index)" @click="tabSwitch(index)" :class="{'tab':true,'active':active==index}"  v-for="(item,index) in tabList" :key="item">{{item}}</div>
      <div id="search">
        <input @keyup.enter="searchHandle" v-model="keywords" type="text">
        <button @click="searchHandle"><i class="el-icon-search"></i></button>
      </div>
    </div>
    <transition name="slide-fade">
      <plat-video ref="platVideo" v-if="isVideo==1" :key="1"></plat-video>
      <company-video ref="companyVideo" v-else-if="isVideo==2" :key="2"></company-video>
      <plat-practice ref="platPractice" v-else-if="isVideo==3" :key="3"></plat-practice>
      <company-practice ref="companyPractice" v-else></company-practice>

    </transition>
    </div>
  </div>
</template>

<script>
import videoCon from "../Video/index"
import videoCon2 from "../Video/index"
import companyPractice from "@/views/Home/Discover/companyPractice";
import platPractice from "@/views/Home/Discover/platPractice";
import Player from "@/components/conmmon/Player";
import PlatVideo from "@/views/Home/Discover/platVideo";
import CompanyVideo from "@/views/Home/Discover/companyVideo";
export default {
  name: "index",
  components:{
    CompanyVideo,
    PlatVideo,
    Player,
    companyPractice,platPractice
  },
  data(){
    return{
      keywords:'',
      isVideo:1,
      active:0,
      tabList:['平台视频','企业视频','平台题库','企业题库'],
      bottom:'',
      keywordsList:['vux从入门到入土','Java该如何学习'],
      keywordsListShow:false,
      time:0,
      isPlayer:false
    }
  },
  beforeDestroy() {
    this.$store.commit("CLOSE_PLAYER")
  },

  methods:{
    searchHandle(){
      let state=this.isVideo
      let keywords=this.keywords
      if(state==1){
        this.$refs.platVideo.init(keywords)
      }else if(state==2){
        this.$refs.companyVideo.searchCompany(keywords)
      }else if(state==3){
        this.$refs.platPractice.getData(keywords)
      }else {
        this.$refs.companyPractice.searchCompany(keywords)
      }
    },
    tabSwitch(index){
      this.active=index
      this.isVideo=index+1
      this.bottom=`${index*200+50}px`
      this.$refs.bottom.style.left=this.bottom
    },
    tabSwitch2(index){
      this.$refs.bottom.style.left=`${index*200+50}px`
    },
    tabSwitch3(){
      this.$refs.bottom.style.left=this.bottom
    }
  }
}
</script>

<style lang="stylus" scoped>
.slide-fade-enter-active {
  transition: all .2s ease;
  transition-delay: .2s;
}

.slide-fade-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-leave-to
{
  transform: translateX(50px);
  opacity: 0;
}
.slide-fade-enter
  transform translateX(-50px)
  opacity 0

#discover
  width 100%
  height 120vh
.tab-bar
  align-items center
  border-radius 5px
  position relative
  width 100%
  height 60px
  background white
  margin 10px 0
  display flex
  box-shadow -1px 1px 3px rgb(222,222,222)
.tab
  font-size 18px
  transition font-size .2s
  font-weight 400
  width 200px
  display flex
  justify-content center
  align-items center
  cursor pointer
  color rgb(75,62,55)
  &:hover
    color #d49521
    font-size 19px
.active
  color #d49521
.bottom
  position absolute
  bottom 0
  height 3px
  width 100px
  background orange
  left 50px
  transition left .2s ease-out
  border-radius 2px
#search
  width 240px
  height 100%
  display flex
  align-items center
  justify-content space-between
  position relative
  & input
    height 20px
    width 180px
    outline none
    border none
    padding-left 7px
    border-radius 15px
    background #e8e1e1
  & button
    height 23px
    width 23px
    border-radius 50%
    display flex
    justify-content center
    align-items center
    &:hover
      cursor pointer
      background-color #52CCBA
#search-list
  transition all .4s
  position absolute
  z-index 5
  height auto
  min-height 20px
  width 180px
  top 100%
  border-radius 10px
  background white
  box-shadow 0px 0px 4px #6d6666
  box-sizing border-box
  padding 8px
  display flex
  flex-direction column
  & .keywords-list
    width 100%
    height 24px
    font-size 13px
    border-radius 5px
    box-sizing border-box
    padding 2px
    cursor pointer
    transition all .2s
    &:hover
      background #d5dfe2
</style>
